<template>
    <div class="order_box">
      <!-- <Loading v-show="LOADING"></Loading> -->
      <nav-com title="付款成功" :showView="showView" @back="backHandler()"></nav-com>
      <div class="pay-box">
        <div class="t0">
          <img src="@/assets/friendShare/right-icon.png">
        </div>
        <div class="t1">付款成功</div>
        <div class="t2">实付金额</div>
        <div class="t3" >
          ¥{{ $route.params.price}}
        </div>
        <div class="t4">查看订单详情，请点击'APP下载'<br>
        下载APP后查看</div>
      </div>
      <div class="rights-list">
        <div class="title">下载APP成为网体会员，享受以下权益:</div>
        <div class="list">
           <div class="list-item" v-for="(item,index) in list" :key="index">
            {{item}}
           </div>
        </div>
      </div>
      <div class="down-btn">APP下载</div>
    </div>
  </template>
  <script>
  import sel from "../../assets/sel.png";
  import seled from "../../assets/seled.png";
  import {
    friendgoodsdetail,
    getAdressManagesAPI2,
    goodsreceive
  } from "@/api/api";
  import { codeLists, writeoff } from "../../api/myExaminatonGaper";
  import navCom from "@/component/nav";
  import Loading from "@/component/loading";
  import { Toast } from "vant";
  
  export default {
    name: "pay",
    components: {
      navCom,
      Loading,
    },
    data() {
      return {
        list:[
          '1.单聊不限制','2.被动单聊','3.群聊500个','4.使用各类营销工具','5.群机器人功能','6.10000测试','7.建群（邀请群、分享群、商品会员群）',' 8.主动发送营销工具、视频、图文等内容 '
          
        ]
      };
    },
  
    async mounted() {
    },
    async created() {
    },
    methods: {
      //返回
      backHandler() {
          this.$router.go(-1);
      },
    }
  };
  </script>
  <style scoped>
  .order_box{
    background:#f7f7f7;
    height: 100vh;
  }
  .pay-box{
    text-align: center;
    padding-bottom: 15px;
    background: #ffffff;
    margin-bottom: 20px;
  }
  .pay-box .t0 img{
    width: 80px;
  }
  .pay-box .t1{
    font-size: 13px;
    color: #d62f34;
  }
  .pay-box .t2{
    font-size: 13px;
  }
  .pay-box .t3{
    font-size: 22px;
    margin: 10px 0;
  }
  .pay-box .t4{
    font-size: 12px;
    color: #777777;
}
.rights-list{
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}
.rights-list .title{
  font-size: 14px;
  margin-bottom: 10px;
}
.rights-list .list .list-item   { float: left;
    font-size: 13px;
    background: #e7e7e7;
    padding: 5px 10px;
    margin-right: 10px;
    margin-bottom: 15px;
   border-radius: 4px;
}
.down-btn{
  clear: both;
  border: 1px solid #d62f34;
  font-size: 13px;
  color: #d62f34;
  line-height: 32px;
  width: 100px;
  border-radius: 16px;
 margin: 0 auto;
 text-align: center;
}
  </style>
  